<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="active==0?'text-red cur':''" @tap="_tabSelect(0)">
					旧货出售
				</view>
				<view class="cu-item flex-sub" :class="active==1?'text-red cur':''" @tap="_tabSelect(1)">
					求购需求
				</view>
			</view>
		</scroll-view>
		<view v-if="active==0">
			<view v-for="(item,index) in junks" :key="index" class="bg-white margin-bottom margin-top padding-top padding-bottom-sm">
				<view class="flex justify-between margin-left margin-right ">
					<view class="">
						<view class="cu-avatar round" :style="{backgroundImage: 'url(' + item.headerImage + ')' }"></view>
						<text class="margin-left-xs text-black">{{item.publishUserName}}</text>
					</view>
					<view class="text-grey align-center">
						<text>{{item.createTime}}</text>
					</view>
				</view>
				<view class="margin-top-sm margin-left margin-right">
					<text class="text-df">{{item.context}}</text>
				</view>
				<view class="margin-top-sm margin-left margin-right grid text-center col-3 grid-square" v-if="item.photos.length > 0">
					<view class="" v-for="(_item,index) in item.photos" :key="index">
						<image mode="scaleToFill" :data-url="_item.url" :src="_item.url" @tap="preview"></image>
					</view>
				</view>
				<view class="solid-top padding-top-sm flex justify-around align-center">
					<view class="">
						<text class="lg text-red cuIcon-moneybag"></text>
						<text class="margin-left-xs text-red">{{item.referencePrice}}</text>
					</view>
					<view @tap="_callpublishUser(item.publishUserLink)">
						<text class="lg text-red cuIcon-phone"></text>
						<text class="margin-left-xs text-red">联系</text>
					</view>

				</view>
			</view>
		</view>

		<view v-if="active==1">
			<view v-for="(item,index) in requirements" :key="index" class="bg-white margin-bottom margin-top padding-top padding-bottom-sm">
				<view class="flex justify-between margin-left margin-right ">
					<view class="">
						<view class="cu-avatar round" :style="{backgroundImage: 'url(' + item.headerImage + ')' }"></view>
						<text class="margin-left-xs text-black">{{item.publishUserName}}</text>
					</view>
					<view class="text-grey align-center">
						<text>{{item.createTime}}</text>
					</view>
				</view>
				<view class="margin-top-sm margin-left margin-right margin-bottom-sm">
					<text class="text-df">{{item.context}}</text>
				</view>
				<view class="solid-top padding-top-sm flex justify-around align-center">
					<view class="">
						<text class="lg text-red cuIcon-moneybag"></text>
						<text class="margin-left-xs text-red">{{item.referencePrice}}</text>
					</view>
					<view @tap="_callpublishUser(item.publishUserLink)">
						<text class="lg text-red cuIcon-phone"></text>
						<text class="margin-left-xs text-red">联系</text>
					</view>

				</view>
			</view>
		</view>
		<flixedadd backgroundColor="#228B22" selectbackgroundColor="#FFB233" color="#FFB233"
		 selectcolor="#228B22" :addlistdata="addlistdata" @addlisttap="addlisttap"></flixedadd>

		<view class="cu-modal" :class="viewImage?'show':''">
			<view class="cu-dialog">
				<view class="bg-img" :style="'background-image: url('+ viewImageSrc +');height:800rpx;'">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="closeViewImage()">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import flixedadd from "../../components/flixedadd/flixedadd.vue";
	import {queryMarket} from '../../api/market/marketApi.js';
	import {getCommunityId} from '../../api/community/communityApi.js';
	import url from '../../constant/url.js'
	export default {
		components: {
			flixedadd
		},
		data() {
			return {
				active: 0,
				viewImage: false,
				viewImageSrc: '',
				communityId:'',
				junks:[],
				requirements:[],
				addlistdata:[
					{
						title:"我的发布",
						src:"/static/images/market_my.png"
					},
					{
						title:"发布信息",
						src:"/static/images/market_add.png"
					}
				]
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
	 async onLoad(options) {
		 await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			let _that = this;
			_that.communityId = getCommunityId();
			console.log(_that.communityId);
			_that._loadMarket(_that.active);
		},
		methods: {
			_tabSelect: function(_active) {
				this.active = _active;
				this._loadMarket(_active);
			},
			_loadMarket: function(_active) {
				let that = this;
				let _typeCd = '';
				if(_active == 0){
					_typeCd = '222222';
				}else{
					_typeCd = '333333';
				}
				this.loading = true;
				let _paramIn = {
					"communityId": that.communityId,
					"typeCd": _typeCd,
					"state":'13001',
					"page":1,
					"row":15
				};
				queryMarket(_paramIn)
			      .then((junkRequirements) => {
						let _junkRequirements = junkRequirements;
						_junkRequirements.forEach(function(_jr){
							let _date = _jr.createTime.replace(" ", ":").replace(/\:/g, "-").split("-");
							let _simDate = "" + _date[1].split("")[1] + "-" + _date[2] + "\t" + _date[3] + ":" + _date[4] + "";
							_jr.createTime = _simDate;
							if(_typeCd == '222222'){
								_jr.photos.forEach(function(_photoTmp){
									_photoTmp.url = url.baseUrl + _photoTmp.url;
								});
							}
							_jr.headerImage = url.getOwnerPhotoPath + "?objId=" + _jr.memberId + "&communityId=" + _jr.communityId +"&fileTypeCd=10000";

						});
						if(_typeCd == '222222'){
							that.junks = _junkRequirements;

						}else{
							that.requirements = _junkRequirements;
						}
			    },err=>{
					console.log('err',err)
				})
			},

			preview: function(e) {
				console.log('图片地址',e);
				let _url = e.target.dataset.url;
				this.viewImageSrc = _url;
				this.viewImage = true;
			},
			closeViewImage: function() {
				this.viewImage = false;
			},
			addlisttap:function(index){/*第一个序列为0,第二个为1,以此类推;当值为-1代表点击的是遮慕层*/
				let login = this.vc.hasLogin()
				// if(!login){
				// 	uni.navigateTo({
				// 		url: '../showlogin/showlogin'
				// 	});
				// 	return;
				// }
				let _that = this;
				if(index == 0){
					this.vc.navigateTo({
						url:'/pages/myJunk/myJunk'
					});
					return ;
				}
				if(index == 1){
					this.vc.navigateTo({
						url:"/pages/newJunk/newJunk?active=" + this.active
					});
					return ;
				}

			},
			_callpublishUser:function(_link){
				let _that = this;
				let login = this.vc.hasLogin()
				// if(!login){
				// 	uni.navigateTo({
				// 		url: '../showlogin/showlogin'
				// 	});
				// 	return;
				// }
				uni.makePhoneCall({
					// 手机号
					phoneNumber: _link,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			}
		}
	}
</script>

<style>

</style>
